<template>
  <el-card class="box-card">
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="令牌" min-width="120px" align="center">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.tokenValue }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名称" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="令牌类型" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.tokenType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="过期时间" min-width="130px" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.expiresIn}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="200px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="removeToken(row.tokenValue)" plain>移除令牌</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </el-card>
</template>
<script>
import { page, deleteById } from "@/api/token";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "Token",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then((response) => {
        this.list = response.data.records;
        console.log(this.list);
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    removeToken(token) {
      deleteById(token).then((response) => {
          let data =  response.data;
          this.getList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}
.dialogBody {
  height: 400px;
  padding: 20px 20px;
  overflow: hidden;
}
.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}
</style>

